<template>
	<view class="bigbox">
		<view class="fot1">补充材料</view>
		<view class="fot2">订单编号：HC2020030001</view>
		<view class="box2"><image src="../../static/59.png" mode=""></image>请拍照/上传补充材料</view>
		<view class="box3">
			<view>
				<image src="../../static/55.png" mode=""></image>
				<view>过户后的行驶证正面</view>
			</view>
			<view>
				<image src="../../static/56.png" mode=""></image>
				<view>过户后的行驶证背面</view>
			</view>
			<view>
				<image src="../../static/57.png" mode=""></image>
				<view>上传过户后登记证书1、2页</view>
			</view>
			<view>
				<image src="../../static/58.png" mode=""></image>
				<view>上传过户后登记证书3、4页</view>
			</view>
			<view>
				<image src="../../static/57.png" mode=""></image>
				<view>公户需提供营业执照</view>
			</view>
			<view>
				<image src="../../static/58.png" mode=""></image>
				<view>商业保险保单</view>
			</view>
		</view>
		<view class="box2">
			<image src="../../static/59.png" mode=""></image>请填写打款单
			<view class="box2_xl">
				<picker class="width" @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input width">{{array[index]}}</view>
				</picker>
			</view>
		</view>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['中国', '美国', '巴西', '日本'],
				index: 0,
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
		}
	}
</script>

<style>
	
	
	.width{
		width: 100%;
	}
	.box2_xl{
		width: 300rpx;
		height:50rpx;
		background:rgba(250,250,250,1);
		border:1px solid rgba(230,230,230,1);
		border-radius:10rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-left: 30rpx;
	}
	.box3>view>image{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.box3>view{
		width: 316rpx;
		height: 211rpx;
		font-size:22rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:#666666;
		margin-bottom: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 10;
	}
	.box3{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.box2>image{
		width: 12rpx;
		height: 14rpx;
		margin-right: 10rpx;
	}
	.box2{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(102,102,102,1);
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}
	.box1>input{
		width: 50%;
		height: 100%;
		text-align: right;
	}
	.box1{
		height:88rpx;
		background:rgba(250,250,250,1);
		border:1px solid rgba(230,230,230,1);
		border-radius:10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 14rpx;
		box-sizing: border-box;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		margin-bottom: 20rpx;
	}
	.fot2{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(58,98,255,1);
		margin-bottom: 30rpx;
	}
	.fot1{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		margin-bottom: 13rpx;
	}
	.bigbox{
		padding: 0 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
	}
</style>
